<template>
  <div class="app-container">
    <el-card>
      <el-form label-width="auto" :model="searchForm" size="small" inline>
        <el-form-item label="类型">
          <el-select v-model="searchForm.category" placeholder="请选择类型">
            <el-option v-for="item in toolCategoryList" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="searchForm.name" placeholder="请输入名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" @click="refresh">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button @click="addTools()" type="primary" icon="el-icon-plus" size="small">新增工具</el-button>
      <el-table style="margin-top: 20px" v-loading="listLoading" :data="tableData.data" border size="mini">
        <el-table-column align="center" prop="id" width="50" label="id"></el-table-column>
        <el-table-column align="center" prop="name" label="名称"></el-table-column>
        <el-table-column align="center" prop="categoryName" label="工具类型">
        </el-table-column>
        <el-table-column align="center" prop="icon" label="图标">
          <template slot-scope="scope">
            <el-image style="width: 40px; height: 40px" :src="scope.row.icon" fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" label="链接类型">

          <template slot-scope="scope">
            {{ scope.row.linkType == 0 ? '内部链接' : '外链' }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="link" label="链接地址"></el-table-column>
        <el-table-column align="center" prop="sort" label="排序"></el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.enableStatus" :active-value="1" :inactive-value="0"
              @change="changeStatus(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" width="150" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" :disabled="scope.row.enableStatus == 1" type="text"
              @click="editTools(scope.row)">编辑</el-button>
            <el-button size="mini" :disabled="scope.row.enableStatus == 1" type="text"
              @click="deleteTools(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pageRight" background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]" :current-page="searchForm.pageNum" :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
      </el-pagination>
    </el-card>

    <el-dialog @close="handleClose" title="新增工具" :visible="dialogFormVisible" width="700px">
      <el-form label-width="auto" ref="form" :rules="rules" :model="addForm" size="small">
        <el-form-item label="工具箱类型" prop="category">
          <el-select style="width: 500px" v-model="addForm.category" placeholder="请选择类型">
            <el-option v-for="item in toolCategoryList" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工具箱名称" prop="name">
          <el-input style="width: 500px" v-model="addForm.name" placeholder="请输入名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <single-upload uploadType="2" @uploadSucces="uploadSucces" v-model="addForm.icon">
            <div class="uploadPic" v-if="!addForm.icon">
              <i style="font-size: 40px; color: #ccc; font-weight: bold" class="el-icon-plus"></i>
            </div>
          </single-upload>
        </el-form-item>
        <el-form-item label="链接类型" prop="linkType">
          <el-select style="width: 500px" v-model="addForm.linkType" placeholder="请选择类型">
            <el-option label="内部链接" :value="0"> </el-option>
            <el-option label="外链" :value="1"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="链接地址" prop="link">
          <el-input style="width: 500px" v-model="addForm.link" placeholder="请输入链接地址" clearable></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number style="width: 150px" v-model="addForm.sort" :min="0" :max="100" label="排序"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100px" size="small" type="primary" @click="onsubmit('form')">保存</el-button>
          <el-button style="width: 100px" size="small" @click="handleClose()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import SingleUpload from "@/components/Upload/uploadOne";
import { getDictData, getDictLabel } from "@/utils/dict";
import { addTool, getToolList, editTool, deleteTools, editStatus } from "@/api/tool";
export default {
  components: { SingleUpload },
  data() {
    return {
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        category: "",
        name: "",
      },
      tableData: {
        data: [],
        total: 0,
      },
      listLoading: false,
      dialogFormVisible: false,
      addForm: {
        category: "",
        name: "",
        icon: "",
        link: "",
        sort: 0,
        linkType: "",
      },
      toolCategoryList: [],
      rules: {
        category: [
          { required: true, message: "请选择工具箱类型", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入工具箱名称", trigger: "blur" },
        ],
        icon: [{ required: true, message: "请上传图标", trigger: "blur" }],
        link: [{ required: true, message: "请输入链接地址", trigger: "blur" }],
        sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
        linkType: [
          { required: true, message: "请选择链接类型", trigger: "blur" },
        ],
      },
    };
  },
  async created() {
    this.toolCategoryList = await getDictData("tool_type");
    this.getList();
  },
  methods: {
    changeStatus(v) {
      console.log("v.enableStatus", v.enableStatus)
      let params = {
        id: v.id,
        enableStatus: v.enableStatus,
      };
      editStatus(params).then((res) => {
        this.$message.success("操作成功");
        this.getList();
      });
    },
    deleteTools(v) {
      this.$confirm("此操作将永久删除该工具, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteTools(v.id).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              })
              this.getList();
            }
          })
        })
    },
    editTools(v) {
      this.addForm = Object.assign({}, v);
      this.dialogFormVisible = true;
    },
    onsubmit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log("this.addForm", this.addForm);
          if (this.addForm.id) {
            editTool(this.addForm).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.dialogFormVisible = false;
                this.getList();
              }
            });
          } else {
            addTool(this.addForm).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "添加成功!",
                });
                this.dialogFormVisible = false;
                this.getList();
              }
            });
          }
          // this.addForm.productId = this.$route.query.productId;
        }
      });
    },

    uploadSucces() {
      //   this.$refs.form.validateField("link");
    },
    refresh() {
      this.searchForm= {
        pageNum: 1,
          pageSize: 10,
          category: "",
          name: "",
      }
      this.getList()
    },
    addTools() {
      this.dialogFormVisible = true;
    },
    search() {
      this.getList();
    },
    resetForm(form) {
      this.$refs[form].resetFields();
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
        type: "",
        name: "",
      };
      this.getList();
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.getList();
      this.searchForm.pageNum = val;
    },
    handleClose() {
      this.dialogFormVisible = false;
      this.addForm = {
        category: "",
        name: "",
        icon: "",
        link: "",
        sort: 0,
        linkType: "",
      };
      this.$refs.form.resetFields();
    },
    getList() {
      this.listLoading = true;
      getToolList(this.searchForm).then((res) => {
        res.data.list.forEach((item) => {
          item.categoryName = getDictLabel(
            item.category,
            this.toolCategoryList
          );
        });
        this.tableData.data = res.data.list;
        this.tableData.total = res.data.total;
        this.listLoading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.uploadPic {
  width: 90px;
  height: 90px;

  background: #eeeeee;
  border-radius: 8px;
  position: relative;

  >i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
